<template>
  <div class="right-top-item-wrap">
    <Card class="list" :bordered="false" v-for="(item) of mainList" :key="item.value.toString()">
      <div slot="title">主周期</div>
      <div class="item">
        <Row>
          <i-col span="8"><span class="name">平均周期</span></i-col>
          <i-col span="16"><span class="text">{{item.avg || '暂无'}}</span></i-col>
        </Row>
        <Row>
          <i-col span="8"><span class="name">范围最大值</span></i-col>
          <i-col span="16"><span class="text">{{item.max || '暂无'}}</span></i-col>
        </Row>
        <Row>
          <i-col span="8"><span class="name">范围最小值</span></i-col>
          <i-col span="16"><span class="text">{{item.min || '暂无'}}</span></i-col>
        </Row>
      </div>
    </Card>
    <Card class="list" :bordered="false" v-for="(item) of secList" :key="item.value.toString()">
      <div slot="title">次周期</div>
      <div class="item">
        <Row>
          <i-col span="8"><span class="name">平均周期</span></i-col>
          <i-col span="16"><span class="text">{{item.avg || '暂无'}}</span></i-col>
        </Row>
        <Row>
          <i-col span="8"><span class="name">范围最大值</span></i-col>
          <i-col span="16"><span class="text">{{item.max || '暂无'}}</span></i-col>
        </Row>
        <Row>
          <i-col span="8"><span class="name">范围最小值</span></i-col>
          <i-col span="16"><span class="text">{{item.min || '暂无'}}</span></i-col>
        </Row>
      </div>
    </Card>
  </div>
</template>
<script>
export default {
  name: 'tables-day-cycle-list',
  props: {
    mainList: {
      type: Array,
      default: () => []
    },
    secList: {
      type: Array,
      default: () => []
    }
  }
}
</script>
<style lang="less" scoped>
.right-top-item-wrap {
  .name,
  .text {
    font-size: 12px;
  }

  .item {
    padding: 0 10px;
  }

  .list {
    margin-bottom: 5px;
  }
}
</style>
